import '@umijs/max';
import {Button, Tooltip} from 'antd';
import {useState} from 'react';
import {formatParams, getUUID} from '@/utils/StrUtils';
import {stream2xlsx} from '@/utils/FileUtil';
import {PlusCircleOutlined, UploadOutlined} from '@ant-design/icons';
import {FooterToolbar, ProTable} from '@ant-design/pro-components';
import styles from './index.less'

const ResourceMgt = (
  {
    columns,
    tableRequest,
    tableRef,
    keyName,
    dataSource,
    dynamicValue,
    requestCallback,
    extraSearchValue, // 父组件扩展字段,如果有更改table会自动更新
    manualRequest, // 是否手动触发第一次请求
    onRowClick,
    canCheck, // 是否出现复选框
    onSelectTableRowChange,
    toolBarRightArea, // table右侧操作区域
    toolBarLeftArea, // table左侧操作区域,可以是字符串,也可以是组件或者组件列表
    labelWidth = 90, // 列表label宽度
    exportRequest, // 导出请求
    addCallback, // 新增回调
    isShowSearch, // 是否显示查询块,默认显示
  }
) => {
  isShowSearch = isShowSearch==undefined ? true : false;
  /**
   * @en-US The pop-up window of the distribution update window
   * @zh-CN 分布更新窗口的弹窗
   * */
  const [selectedRows, setSelectedRows] = useState([]);

  const onTableRowChange = (selectedRowKeys, selectedRows) => {
    setSelectedRows(selectedRows);
    onSelectTableRowChange && onSelectTableRowChange(selectedRowKeys, selectedRows);
  }

  const getActions = () => {
    let actions = [];
    if (toolBarRightArea) {
      actions.push(...toolBarRightArea);
    }
    if (addCallback) {
      actions.push(
        <Tooltip title="新增">
          <PlusCircleOutlined
            className={styles.toolbarIcon}
            onClick={() => {
              addCallback();
            }}
          />
        </Tooltip>
      );
    }
    if (exportRequest) {
      actions.push(
        <Tooltip title="导出">
          <UploadOutlined
            className={styles.toolbarIcon}
            onClick={() =>
              // exportRequest(formatParams({...extraSearchValue })).then(
              //   (res) => {
              //     stream2xlsx(res);
              //   },
              // )
              console.log('导出')
            }
          />
        </Tooltip>
      );
    }
    return actions;
  }
  return (
    <div className={styles.tableList}>
      <ProTable
        size="middle"
        columns={columns}
        dataSource={dataSource}
        actionRef={tableRef}
        // 如果extraSearchValue有更改会自动触发reload
        params={formatParams(extraSearchValue)}
        rowKey={(row) => (keyName ? row[keyName] : getUUID())}
        scroll={{x: 'max-content'}}
        manualRequest={manualRequest}
        rowSelection={
          canCheck ? {
            type: 'checkbox',
            onChange: onTableRowChange,
          } : false
        }
        onRow={(record) => {
          return {
            onClick: () => onRowClick && onRowClick(record),
          };
        }}
        // 自定义搜索区域操作部分
        search={
          isShowSearch ? {
          labelWidth,
          // 给search操作部分添加组件
          // optionRender: (searchConfig, formProps, dom) => [
          //   ...dom,
          //   <Button key="out">导出</Button>,
          // ],
          } : false
        }
        toolbar={{
          // 自定义列表左侧操作区域
          title: toolBarLeftArea,
          // 自定义列表右侧操作区域
          actions: getActions(),
        }}
        request={async (params, sorter, filter) => {
          if (dataSource) {
            // dataSource存在数据，不从请求中拿数据,直接使用dataSource。
            return false;
          }
          // 表单搜索项会从 params 传入，传递给后端接口。
          let tableParams = {
            ...params,
            ...dynamicValue,
            page: params.current,
            limit: params.pageSize,
          }
          delete tableParams['current'];
          delete tableParams['pageSize'];
          const result = await tableRequest(tableParams);
          requestCallback && requestCallback(result);
          return {
            data: result.items,
            success: true,
            total: result.total,
          };
        }}

      />
      {selectedRows?.length > 0 && (
        <FooterToolbar
          extra={
            <div>
              已选择{' '}
              <a
                style={{
                  fontWeight: 600,
                }}
              >
                {selectedRows.length}
              </a>{' '}
              项
            </div>
          }
        >
          {/*	添加footer操作按钮 */}
        </FooterToolbar>
      )}
    </div>
  );
}

export default ResourceMgt;
